<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>抽取公共页面内容</title>

    <!-- 0、以下抽取head里面相同的元素，放到div里面，到时候引入使用 replace-->
    <div th:fragment="head-div">
        <!-- Custom Theme files -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="keywords" content=""/>
        <script type="application/x-javascript">
            addEventListener("load", function () {
                setTimeout(hideURLbar, 0);
            }, false);

            function hideURLbar() {
                window.scrollTo(0, 1);
            }
        </script>
        <!-- //Custom Theme files -->
        <link th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet" media="all">
        <link th:href="@{/css/style.css}" type="text/css" rel="stylesheet" media="all">
        <!-- js -->
        <script th:src="@{/js/jquery.min.js}"></script>
        <script type="text/javascript" th:src="@{../static/js/bootstrap-3.1.1.min.js}"></script>
        <!-- //js -->
        <!-- cart -->
        <script th:src="@{/js/simpleCart.min.js}"></script>
        <!-- cart -->
    </div>
</head>
<body>
<!--1、header-->
<div th:fragment="header-div" class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand"><a href="index.html">心语蛋糕</a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="index.html" class="active">主页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">生日<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-4">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>主题</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">心形</a></li>
                                        <li><a class="list" href="products.html">卡通</a></li>
                                        <li><a class="list" href="products.html">2-3层蛋糕</a></li>
                                        <li><a class="list" href="products.html">方形</a></li>
                                        <li><a class="list" href="products.html">圆形</a></li>
                                        <li><a class="list" href="products.html">照片蛋糕</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>重量</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">1 kG</a></li>
                                        <li><a class="list" href="products.html">1.5 kG</a></li>
                                        <li><a class="list" href="products.html">2 kG</a></li>
                                        <li><a class="list" href="products.html">3 kG</a></li>
                                        <li><a class="list" href="products.html">4 kG</a></li>
                                        <li><a class="list" href="products.html">更大</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">婚礼<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-4">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>主题</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">心形</a></li>
                                        <li><a class="list" href="products.html">卡通</a></li>
                                        <li><a class="list" href="products.html">2-3层蛋糕</a></li>
                                        <li><a class="list" href="products.html">方形</a></li>
                                        <li><a class="list" href="products.html">圆形</a></li>
                                        <li><a class="list" href="products.html">照片蛋糕</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>重量</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">1 kG</a></li>
                                        <li><a class="list" href="products.html">1.5 kG</a></li>
                                        <li><a class="list" href="products.html">2 kG</a></li>
                                        <li><a class="list" href="products.html">3 kG</a></li>
                                        <li><a class="list" href="products.html">4 kG</a></li>
                                        <li><a class="list" href="products.html">更大</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">特别优惠 <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-4">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>主题</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">心形</a></li>
                                        <li><a class="list" href="products.html">卡通</a></li>
                                        <li><a class="list" href="products.html">2-3层蛋糕</a></li>
                                        <li><a class="list" href="products.html">方形</a></li>
                                        <li><a class="list" href="products.html">圆形</a></li>
                                        <li><a class="list" href="products.html">照片蛋糕</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>重量</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">1 kG</a></li>
                                        <li><a class="list" href="products.html">1.5 kG</a></li>
                                        <li><a class="list" href="products.html">2 kG</a></li>
                                        <li><a class="list" href="products.html">3 kG</a></li>
                                        <li><a class="list" href="products.html">4 kG</a></li>
                                        <li><a class="list" href="products.html">更大</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">商店<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-4">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <h4>特色</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">冰淇淋蛋糕</a></li>
                                        <li><a class="list" href="products.html">瑞士卷</a></li>
                                        <li><a class="list" href="products.html">拉斯克·卡普</a></li>
                                        <li><a class="list" href="products.html">纸杯蛋糕</a></li>
                                        <li><a class="list" href="products.html">松饼</a></li>
                                        <li><a class="list" href="products.html">梅尔韦勒</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                <div class="search">
                    <form class="navbar-form">
                        <input type="text" class="form-control">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">
                            查找
                        </button>
                    </form>
                </div>
            </div>
            <div class="header-right login">
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <div id="loginBox">
                    <form id="loginForm">
                        <fieldset id="body">
                            <fieldset>
                                <label for="email">邮箱地址</label>
                                <input type="text" name="email" id="email">
                            </fieldset>
                            <fieldset>
                                <label for="password">密码</label>
                                <input type="password" name="password" id="password">
                            </fieldset>
                            <input type="submit" id="login" value="Sign in">
                            <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
                        </fieldset>
                        <p>新的用户 ? <a class="sign" href="account.html">注册</a> <span><a href="#">忘记密码?</a></span></p>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
                <div class="cart-box">
                    <h4><a href="checkout.html">
                        <span class="simpleCart_total"> ￥0.00 </span> (<span id="simpleCart_quantity"
                                                                             class="simpleCart_quantity"> 0 </span>)
                    </a></h4>
                    <p><a href="javascript:;" class="simpleCart_empty">清空购物车</a></p>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!--//header-->

<!--2、footer-->
<div th:fragment="footer-div" class="footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-2 footer-grid">
                <h4>公司</h4>
                <ul>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">事件</a></li>
                    <li><a href="#">经销商定位器</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>服务</h4>
                <ul>
                    <li><a href="#">支持</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">担保</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h4>订单和退货</h4>
                <ul>
                    <li><a href="#">订单状态</a></li>
                    <li><a href="#">运输政策</a></li>
                    <li><a href="#">退货政策</a></li>
                    <li><a href="#">数字礼品卡</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>合法的</h4>
                <ul>
                    <li><a href="#">隐私</a></li>
                    <li><a href="#">条款和条件</a></li>
                    <li><a href="#">社会责任</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid icons">
                <h4>联系我们</h4>
                <ul>
                    <li><a href="#"><img th:src="@{../static/images/wx.png}" alt=""/>微信</a></li>
                    <li><a href="#"><img th:src="@{../static/images/qq.png}" alt=""/>QQ</a></li>
                    <li><a href="#"><img th:src="@{../static/images/email.png}" alt=""/>邮箱</a></li>
                    <li><a href="#"><img th:src="@{../static/images/tel.png}" alt=""/>电话</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div></div>
<!--//footer-->

<!--3、最后面的-->
<div th:fragment="last-div" class="footer-bottom">
    <div class="container">
        <p><img th:src="@{../static/images/警网.png}"/> 京公网安备 1101080202128 号 &emsp;&emsp;@ 2020.12.Company name All rights reserved.
            &emsp;&emsp; <a
                    href="http://localhost:8888/%E7%94%9F%E6%97%A5%E8%9B%8B%E7%B3%95%E5%BA%97%E7%BD%91%E7%AB%99/single.html">心语蛋糕店</a>
        </p>
    </div>
</div>
</body>
</html>